@import './var.less';

@btn-prefix-cls: ~'@{prefix}-btn';

.@{btn-prefix-cls} {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-weight: @btn-font-weight;

  &.@{btn-prefix-cls}-only-icon .@{btn-prefix-cls}-icon{
    display: flex;
    justify-content: center;
  }

  &:not(.@{btn-prefix-cls}-only-icon) .@{btn-prefix-cls}-icon{
    margin-right: 8px;
  }
}

.btn-type(@type){
  .normal(){
    color: ~'@{btn-@{type}-color-text}';
    background-color: ~'@{btn-@{type}-color-bg}';
    border: @btn-border-width ~'@{btn-@{type}-border-style}' ~'@{btn-@{type}-color-border}';
  }

  .@{btn-prefix-cls}-@{type}{
    .normal();

    &:hover{
      color: ~'@{btn-@{type}-hover-color-text}';
      background-color: ~'@{btn-@{type}-hover-color-bg}';
      border-color: ~'@{btn-@{type}-hover-color-border}';
    }

    &:active{
      color: ~'@{btn-@{type}-active-color-text}';
      background-color: ~'@{btn-@{type}-active-color-bg}';
      border-color: ~'@{btn-@{type}-active-color-border}';
    } 

    &.@{btn-prefix-cls}-disabled{
      color: ~'@{btn-@{type}-disabled-color-text}';
      background-color: ~'@{btn-@{type}-disabled-color-bg}';
      border-color: ~'@{btn-@{type}-disabled-color-border}';
      cursor: not-allowed;
    }
  }
}

.btn-status(@type, @status){
  .normal(){
    color: ~'@{btn-@{type}-color-text_@{status}}';
    background-color: ~'@{btn-@{type}-color-bg_@{status}}';
    border-color: ~'@{btn-@{type}-color-border_@{status}}';
  }

  .@{btn-prefix-cls}-@{type}.@{btn-prefix-cls}-status-@{status}{
    .normal();

    &:hover{
      color: ~'@{btn-@{type}-hover-color-text_@{status}}';
      background-color: ~'@{btn-@{type}-hover-color-bg_@{status}}';
      border-color: ~'@{btn-@{type}-hover-color-border_@{status}}';
    }

    &:active{
      color: ~'@{btn-@{type}-active-color-text_@{status}}';
      background-color: ~'@{btn-@{type}-active-color-bg_@{status}}';
      border-color: ~'@{btn-@{type}-active-color-border_@{status}}';
    } 

    &.@{btn-prefix-cls}-disabled{
      color: ~'@{btn-@{type}-disabled-color-text_@{status}}';
      background-color: ~'@{btn-@{type}-disabled-color-bg_@{status}}';
      border-color: ~'@{btn-@{type}-disabled-color-border_@{status}}';
      cursor: not-allowed;
    }
  }
}


.btn-size(@size){
  @size-type: ~'size-@{size}';
  @size-height: ~'btn-size-@{size}-height';
  @bsp: ~'btn-size-@{size}-padding-horizontal';
  @bss: ~'btn-size-@{size}-font-size';

  .@{btn-prefix-cls}-@{size-type}{
    padding: 0 @@bsp;
    height: @@size-height;  
    font-size: @@bss; 
    border-radius: @btn-border-radius;
  }

  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-only-icon{
    width: @@size-type;
    height: @@size-type;
    padding: 0;
  }

  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-shape-round{
    border-radius: calc(@@size-height * 0.5);
  }

  .@{btn-prefix-cls}-@{size-type}.@{btn-prefix-cls}-shape-circle{
    width: @@size-type;
    height: @@size-type;
    padding: 0;
    border-radius: @radius-circle;
  }
}

.btn-type(outline);
.btn-status(outline, success);
.btn-status(outline, warning);
.btn-status(outline, danger);



.btn-type(primary);
.btn-status(primary, success);
.btn-status(primary, warning);
.btn-status(primary, danger);

.btn-type(secondary);
.btn-status(secondary, success);
.btn-status(secondary, warning);
.btn-status(secondary, danger);

.btn-type(dashed);
.btn-status(dashed, success);
.btn-status(dashed, warning);
.btn-status(dashed, danger);



.btn-type(text);
.btn-status(text, success);
.btn-status(text, warning);
.btn-status(text, danger);


// 设置按钮大小
.btn-size(mini);
.btn-size(small);
.btn-size(medium);
.btn-size(large);
